<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>testbootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-glyphicons.css" rel="stylesheet">
    <link href="css/iviads.css" rel="stylesheet">

    <!-- JavaScript plugins (requires jQuery) -->
    <script src="http://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.revolver.min.js"></script>
    <script src="js/iviads.js"></script>
</head>
<body>
<div class="hidden-sm">
<!-- start head -->
<div class="container" id="head">
    <div class="row">
        <div class="col-lg-6 col-sm-6">
            <img id="logo" src="img/layout/logo.png" width="191px" height="87px">
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-4 col-sm-5 col-lg-offset-2 col-sm-offset-1">
            <div id="timkiem" class="input-group">
                <input type="text" class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button"> Tìm kiếm </button>
                </span>
            </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->
</div>
<!-- end head -->
<!-- start banner -->
<div id="banner">
    <div id="menucontiner" class="container">
        <ul id="menu" class="nav nav-justified ">
                <li class="active"><a href="#"> TRANG CHỦ </a></li>
                <li><a href="#"> GIỚI THIỆU </a></li>
                <li><a href="#"> DỊCH VỤ </a></li>
                <li><a href="#"> DỰ ÁN </a></li>
                <li><a href="#"> LIÊN HỆ </a></li>
        </ul>
    </div>
    <div id="banner-container" class="visible-lg">
        <div id="my_slider">
                <div class="slide ">
                    <img src="img/layout/mac-img.png" alt="" width="300px" height="275px" />
                    <div class="item-info">
                        <!--<h4>Heading Title Goes</h4>-->
                        <h2>Quản trị website</h2>
                        <p>Dịch vụ trọn gói quản trị web chuyên nghiệp , quảng bá web miễn phí.Dịch vụ trọn gói quản trị web chuyên nghiệp , quảng bá web miễn phí.Dịch vụ trọn gói quản trị web chuyên nghiệp , quảng bá web miễn phí.Dịch vụ trọn gói quản trị web chuyên nghiệp , quảng bá web miễn phí.</p>
                    </div>
                    <div class="cll"></div>
                </div>
            <div class="slide hidden2">
                <img src="img/layout/mac-img.png" alt="" width="300px" height="275px" />
                <div class="item-info">
                    <!--<h4>Heading Title Goes</h4>-->
                    <h2>Quản trị website 2</h2>
                    <p>Dịch vụ trọn gói quản trị web chuyên nghiệp , quảng bá web miễn phí.Dịch vụ trọn gói quản trị web chuyên nghiệp , quảng bá web miễn phí.Dịch vụ trọn gói quản trị web chuyên nghiệp , quảng bá web miễn phí.Dịch vụ trọn gói quản trị web chuyên nghiệp , quảng bá web miễn phí.</p>
                </div>
            </div>
        </div>
        <!-- thumbs -->
        <div id="thumbs-wrapper" class="pull-right">
            <div id="thumbs">
                <a href="#img1" class="selected"><img src="img/layout/thumb.png"/></a>
                <a href="#img2"><img src="img/layout/thumb2.png" /></a>
                <a href="#img3"><img src="img/layout/thumb3.png" /></a>
                <a href="#img4"><img src="img/layout/thumb4.png" /></a>
            </div>
            <a id="prev" href="#"></a>
            <a id="next" href="#"></a>
        </div>
        <!-- end of thumbs -->
    </div>
    <div id="banner-container-tablet" class="visible-md">

        <div class="row">
            <div class="col-sm-4 col-sm-offset-1">
                <img id="img-banner-container-tablet" src="img/layout/mac-img.png" alt="" class="img-rounded img-thumbnail" />
            </div>
            <div class="col-sm-5 col-sm-offset-1">
                <!--<h4>Heading Title Goes</h4>-->
                <h2>Quản trị website</h2>
                <p>Dịch vụ trọn gói quản trị web chuyên nghiệp , quảng bá web miễn phí.Dịch vụ trọn gói quản trị web chuyên nghiệp , quảng bá web miễn phí.</p>
            </div>
        </div>
        <!-- thumbs -->
        <div id="thumbs-wrapper-tablet" class="pull-right">
            <div id="thumbs-tablet">
                <a href="#img1" class="selected"><img src="img/layout/thumb.png"/></a>
                <a href="#img2"><img src="img/layout/thumb2.png" /></a>
                <a href="#img3"><img src="img/layout/thumb3.png" /></a>
                <a href="#img4"><img src="img/layout/thumb4.png" /></a>
            </div>
            <a id="prev-tablet" href="#"></a>
            <a id="next-tablet" href="#"></a>
        </div>
        <!-- end of thumbs -->
    </div>


</div>
<!-- end banner -->
</div>
<div class="visible-sm">
    <div id="head-phone" >
        <div id="cot1">
            <a href="#"><img src="img/layout/menu.png" /></a>
            <div id="menu-dropdown" class="popover fade bottom in" >
                <div class="arrow"></div>
                <ul>
                    <li id="li-timkiem">
                        <div class="input-group">
                            <input type="text" class="form-control">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button"> <span class="glyphicon glyphicon-search"> </span> </button>
                            </span>
                        </div>
                    </li>
                    <li class="active"> <i class="glyphicon glyphicon-home"> </i> <a href="#"> Trang chủ </a></li>
                    <li> <i class="glyphicon glyphicon-th-large"> </i> <a href="#"> Giới thiệu </a></li>
                    <li> <i class="glyphicon glyphicon-tasks"> </i> <a href="#"> Dịch vụ </a></li>
                    <li> <i class="glyphicon glyphicon-folder-open"> </i> <a href="#"> Dự án </a></li>
                    <li> <i class="glyphicon glyphicon-envelope"> </i> </span> <a href="#"> Liên hệ </a></li>
                </ul>
            </div>
        </div>
        <div id="cot2">
            <a href="#"><img src="img/layout/logo2.png" /></a>
        </div>
        <div id="cot3">
            <a href="#"><!--<img src="img/layout/up.png" />--></a>
        </div>
    </div>
    <div id="carousel-example-generic" class="carousel slide">
        <!-- Indicators -->
        <ol id="banner-carousel" class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active text-center">
                <img src="img/layout/mac-img.png" width="70%"/>
                <div class="carousel-caption">
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </div>

</div>


</body>
</html>